<template>
  <!--  <div style="margin-top: 10px">-->
  <!--    <el-tag class="org-item" :type="org.type === 'dept'?'':'info'"-->
  <!--            v-for="(org, index) in _value" :key="index + '_org'"-->
  <!--            closable size="mini" @close="removeOrgItem(index)">-->
  <!--      {{ org.name }}-->
  <!--    </el-tag>-->
  <!--  </div>-->
  <div class="tag-box">
    <div class="tag-box-left">
      <el-button class="mr5 mb5" size="mini" @click="selectOrg">+ 添加</el-button>
      <el-tag
        v-for="(org, index) in _value"
        :key="index + '_org'"
        class="mr5 mb5"
        closable
        @close="removeOrgItem(index)"
        type="info">
        {{ org.name }}
      </el-tag>
    </div>
    <span class="el-icon-error tag-boxicon"></span>
  </div>
</template>

<script>
export default {
  name: "OrgItems",
  components: {},
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    _value: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    removeOrgItem(index) {
      this.$emit('detelData', this.value[index].id)
      this._value.splice(index, 1)
    },
    selectOrg() {
      this.$emit("selectOrg");
    }
  }
}
</script>

<style scoped>
.org-item {
  margin: 5px;
}

.tag-box {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  align-items: center;
}

.tag-box-left {
  flex: 1;
}

.tag-boxicon {
  color: #ddd;
}

.userTitle {
  padding: 10px 0;
  font-weight: 500;
  font-size: 14px;
}
</style>
